<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>孩子</title>
<link rel="stylesheet" href="/css/index.css" type="text/css">
<script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.SuperSlide.2.1.3.js"></script>
</head>
<body>
	<div class="topbanner"><img src="/img/banner.png" alt=""></div>
   <div class="main children">
  		<img class="ring" src="/img/two.png" alt=""/>
  		<img class="ring2" src="/img/two.png" alt=""/>
   		<div class="boyTop" id="boyTop">
   			<!--新增切换按钮开始-->
   			<div class="HnewBtn">
				<ul>
					<li class="on">老师的任务</li>
					<li>家长的任务</li>
				</ul>
			</div>
			<!--新增切换按钮结束-->
			<!---->
			<div class="nobody">
				<!--<h1 style="text-align: center">暂无任务</h1>-->
			</div>
			<div class="giftBody">

			</div>
   		</div>
   		
   		<div class="boyBotton" id="record">

   		</div>
   		
   		<div class="boyBotton HHxiangqing">

   		</div>
   </div>
</body>

<script th:inline="javascript">
	var idCard = [[${idCard}]]
	var url = 'http://localhost:8083'
  //  var url = 'http://eyemonitor-api.dddmaker.com'
	$(function () {
       var taskType;
	   $('.HnewBtn li').click(function () {
          $(this).siblings('li').removeClass('on');  // 删除其他兄弟元素的样式
          $(this).addClass('on');
          $('.giftBody').html("")

          if($('.HnewBtn ul .on').text()=="老师的任务"){
             taskType = 1
          }else if($('.HnewBtn ul .on').text()=="家长的任务"){
             taskType = 2
          }
          $.ajax({
             cache: true,
             type: "get",
             url: url+"/api/gift/myGiftPc?idCard="+idCard+"&taskType="+taskType,
             dataType : "jsonp",
             jsonp:"callback",
             async: false,
             success: function (data) {
                console.log(data)
                var html = ''
				var html2 = ''
                var taskIng = data.data.taskIng
				var recordDOList = data.data.recordDOList

				if(taskIng){
                   var giftDO = taskIng.giftDO
                   $('.boyBotton').show()
                   $('.nobody').html('');

                   html += '<div class="txt-left">'
                   html +=  '<img src="'+giftDO.coverImg+'" alt=""/><p>'+giftDO.giftName+'</p>'
                   html += '</div>'
                   html +=  '<div class="txt-right">'
                   html += '<h3>任务进度还差 <span><i>3</i>天，继续加油！</span></h3>'
                   html += '<ul>'
                   html +=  '<li><i>4</i> 天<span>已完成天数</span></li>'

                      if(data.data.overallMerit == 1){
                         html +=  '<li><i>'+data.data.overallMerit+'</i><span>优秀</span></li>'
                      }else if(data.data.overallMerit == 2){
                         html +=  '<li><i>'+data.data.overallMerit+'</i><span>良好</span></li>'
                      }else if(data.data.overallMerit== 3){
                         html +=  '<li><i>'+data.data.overallMerit+'</i><span>不太好</span></li>'
                      }else if(data.data.overallMerit == 4){
                         html +=  '<li><i>'+data.data.overallMerit+'</i><span>差</span></li>'
                      }else{
                         html +=  '<li><i>'+data.data.overallMerit+'</i><span>极差</span></li>'
                      }


                   html += '<li><i>'+data.data.allUseJianhuyi+'</i> h<span>平均有效使用时长</span></li>'
                   html += '</ul>'
                   html += '</div>'

                   $('.giftBody').html(html)

                   html2+='<h3>任务详情</h3>'
                   html2+=   '   <table border="1" cellspacing="0" cellpadding="0" width="100%">'
                   html2+=   '     <thead>'
                   html2+=   '     <tr>'
                   html2+=   '     <th>任务名称</th>'
                   html2+=   '     <th>任务目标</th>'
                   html2+=   '     <th>实际完成</th>'
                   html2+=    '     </tr>'
                   html2+=   '     </thead>'
                   html2+=   '  <tbody>'
                   html2+=    '<tr>'
                   html2+=    '  <td>时长</td>'
                   html2+=   '  <td>'+taskIng.taskTime+'天</td>'
                   html2+=   '  <td>3天</td>'
                   html2+=   '</tr>'
                   html2+=  '<tr>'
                   html2+=   '  <td>平均单次阅读时长</td>'
                   if(taskIng.avgRead == 1){
                      html2+=   '  <td>优秀</td>'
                   }else if(taskIng.avgRead == 2){
                      html2+=   '  <td>良好</td>'
                   }else if(taskIng.avgRead == 3){
                      html2+=   '  <td>差</td>'
                   }else if(taskIng.avgRead == 4){
                      html2+=   '  <td>极差</td>'
                   }else{
                      html2+=   '  <td></td>'
                   }
                   html2+=   '  <td>良好</td>'
                   html2+=   '</tr>'
                   html2+=   '<tr>'
                   html2+=    '  <td>平均阅读距离</td>'

                   if(taskIng.avgReadDistance == 1){
                      html2+=   '  <td>优秀</td>'
                   }else if(taskIng.avgReadDistance == 2){
                      html2+=   '  <td>良好</td>'
                   }else if(taskIng.avgReadDistance == 3){
                      html2+=   '  <td>差</td>'
                   }else if(taskIng.avgReadDistance == 4){
                      html2+=   '  <td>极差</td>'
                   }else{
                      html2+=   '  <td></td>'
                   }
                   html2+=   '  <td>良好</td>'
                   html2+= '</tr>'
                   html2+=  '<tr>'
                   html2+=    '  <td>平均单次看手机时长</td>'

                   if(taskIng.avgLookPhone == 1){
                      html2+=   '  <td>优秀</td>'
                   }else if(taskIng.avgLookPhone == 2){
                      html2+=   '  <td>良好</td>'
                   }else if(taskIng.avgLookPhone == 3){
                      html2+=   '  <td>差</td>'
                   }else if(taskIng.avgLookPhone == 4){
                      html2+=   '  <td>极差</td>'
                   }else{
                      html2+=   '  <td></td>'
                   }
                   html2+=  '  <td>4h</td>'
                   html2+=   '</tr>'
                   html2+=   '<tr>'
                   html2+=    '  <td>平均坐姿倾斜度</td>'

                   if(taskIng.avgSitTilt == 1){
                      html2+=   '  <td>优秀</td>'
                   }else if(taskIng.avgSitTilt == 2){
                      html2+=   '  <td>良好</td>'
                   }else if(taskIng.avgSitTilt == 3){
                      html2+=   '  <td>差</td>'
                   }else if(taskIng.avgSitTilt == 4){
                      html2+=   '  <td>极差</td>'
                   }else{
                      html2+=   '  <td></td>'
                   }

                   html2+=   '  <td>良好</td>'
                   html2+=   '</tr>'
                   html2+=    '<tr>'
                   html2+=   '  <td>健康用眼评级</td>'
                   if(taskIng.eyeRate == 1){
                      html2+=   '  <td>优秀</td>'
                   }else if(taskIng.eyeRate == 2){
                      html2+=   '  <td>良好</td>'
                   }else if(taskIng.eyeRate == 3){
                      html2+=   '  <td>差</td>'
                   }else if(taskIng.eyeRate == 4){
                      html2+=   '  <td>极差</td>'
                   }else{
                      html2+=   '  <td></td>'
                   }
                   html2+=   '  <td>良好</td>'
                   html2+=   '</tr>'
                   html2+=   '<tr>'
                   html2+=   '  <td>平均户外时长</td>'
                   if(taskIng.avgOut == 1){
                      html2+=   '  <td>优秀</td>'
                   }else if(taskIng.avgOut == 2){
                      html2+=   '  <td>良好</td>'
                   }else if(taskIng.avgOut == 3){
                      html2+=   '  <td>差</td>'
                   }else if(taskIng.avgOut == 4){
                      html2+=   '  <td>极差</td>'
                   }else{
                      html2+=   '  <td></td>'
                   }

                   html2+=    '  <td>良好</td>'
                   html2+=   '</tr>'
                   html2+=    '<tr>'
                   html2+=   '  <td>平均阅读光照</td>'

                   if(taskIng.avgLight == 1){
                      html2+=   '  <td>优秀</td>'
                   }else if(taskIng.avgLight == 2){
                      html2+=   '  <td>良好</td>'
                   }else if(taskIng.avgLight == 3){
                      html2+=   '  <td>差</td>'
                   }else if(taskIng.avgLight == 4){
                      html2+=   '  <td>极差</td>'
                   }else{
                      html2+=   '  <td></td>'
                   }

                   html2+=   '  <td class="excellent">优秀</td>'
                   html2+=    '</tr>'
                   html2+=   '<tr>'
                   html2+=   '  <td>平均单次看电脑电视时长</td>'
                   if(taskIng.avgLookTv == 1){
                      html2+=   '  <td>优秀</td>'
                   }else if(taskIng.avgLookTv == 2){
                      html2+=   '  <td>良好</td>'
                   }else if(taskIng.avgLookTv == 3){
                      html2+=   '  <td>差</td>'
                   }else if(taskIng.avgLookTv == 4){
                      html2+=   '  <td>极差</td>'
                   }else{
                      html2+=   '  <td></td>'
                   }

                   html2+=   '  <td class="excellent">优秀</td>'
                   html2+=   '</tr>'
                   html2+=    '<tr>'
                   html2+=    '  <td>有效使用监护仪总时长</td>'
                   if(taskIng.effectiveUseTime == 1){
                      html2+=   '  <td>优秀</td>'
                   }else if(taskIng.effectiveUseTime == 2){
                      html2+=   '  <td>良好</td>'
                   }else if(taskIng.effectiveUseTime == 3){
                      html2+=   '  <td>差</td>'
                   }else if(taskIng.effectiveUseTime == 4){
                      html2+=   '  <td>极差</td>'
                   }else{
                      html2+=   '  <td></td>'
                   }
                   html2+=   '  <td>良好</td>'
                   html2+=   '</tr>'
                   html2+=   '  </tbody>'
                   html2+=   '</table>'

                   $('.HHxiangqing').html(html2)
				}
				else{
                   $('.nobody').html('<h1 style="text-align: center">暂无任务</h1>');
                   $('.boyBotton').hide()
				}

				if(recordDOList){
				   var record = ''
                   record+='<h3>任务记录</h3>'
                   record+=  '   <table border="1" cellspacing="0" cellpadding="0" width="100%">'
                   record+=   '     <thead>'
                   record+=   '     <tr>'
                   record+=   '     <th>日期</th>'
                   record+=   '     <th>有效使用时长(h)</th>'
                   record+=   '     <th>评级</th>'
                   record+=   '     <th>完成度</th>'
                   record+=   '     </tr>'
                   record+=   '     </thead>'
                   record+=  '  <tbody>'
				   for(var i =0;i<recordDOList.length;i++){
                      record+=   '<tr>'
                      record+=   '  <td>'+recordDOList[i].date+'</td>'
                      record+=   '  <td>'+recordDOList[i].useJianhuyiTime+'h</td>'
					  if(recordDOList[i].grade == 1){
                         record+=  '  <td class="excellent">极差</td>'
					  }else if(recordDOList[i].grade == 2){
                         record+=  '  <td class="excellent">差</td>'
                      }else if(recordDOList[i].grade == 3){
                         record+=  '  <td class="excellent">不太好</td>'
                      }else if(recordDOList[i].grade == 4){
                         record+=  '  <td class="excellent">良</td>'
                      }else if(recordDOList[i].grade == 5){
                         record+=  '  <td class="excellent">优</td>'
                      }

                      if(recordDOList[i].isfinish){
                         record+=   '  <td><img src="/img/JD-excellent.png" alt=""></td>'
                      }else if(!recordDOList[i].isfinish){
                         record+=   '  <td><img src="/img/JD-good.png" alt=""></td>'
                      }
                      record+=   '</tr>'
				   }
                   record+=   '  </tbody>'
                   record+=   '</table>'
                   $('#record').html(record)
				}else{
                   var record = ''
                   record+='<h3>任务记录</h3>'
                   record+=  '   <table border="1" cellspacing="0" cellpadding="0" width="100%">'
                   record+=   '     <thead>'
                   record+=   '     <tr>'
                   record+=   '     <th>日期</th>'
                   record+=   '     <th>有效使用时长(h)</th>'
                   record+=   '     <th>评级</th>'
                   record+=   '     <th>完成度</th>'
                   record+=   '     </tr>'
                   record+=   '     </thead>'

                   $('#record').html(record)
				}

             },
             error: function (request) {
                alert("Connection error");
             },
          });
       })

       if($('.HnewBtn ul .on').text()=="老师的任务"){
          taskType = 1
       }else if($('.HnewBtn ul .on').text()=="家长的任务"){
          taskType = 2
       }
       $.ajax({
          cache: true,
          type: "get",
          url: url+"/api/gift/myGiftPc?idCard="+idCard+"&taskType="+taskType,
          dataType : "jsonp",
          jsonp:"callback",
          async: false,
          success: function (data) {
             console.log(data)
             var html = ''
			 var html2 = ''
             var taskIng = data.data.taskIng

			 if(taskIng){
                var giftDO = taskIng.giftDO
                html += '<div class="txt-left">'
                html +=  '<img src="'+giftDO.coverImg+'" alt=""/><p>'+giftDO.giftName+'</p>'
                html += '</div>'
                html +=  '<div class="txt-right">'
                html += '<h3>任务进度还差 <span><i>3</i>天，继续加油！</span></h3>'
                html += '<ul>'
                html +=  '<li><i>4</i> 天<span>已完成天数</span></li>'
                html +=  '<li><i>优秀</i><span>平均等级</span></li>'
                html += '<li><i>4.6</i> h<span>平均有效使用时长</span></li>'
                html += '</ul>'
                html += '</div>'

                $('.giftBody').html(html)

                html2+='<h3>任务详情</h3>'
                html2+=   '   <table border="1" cellspacing="0" cellpadding="0" width="100%">'
                html2+=   '     <thead>'
                html2+=   '     <tr>'
                html2+=   '     <th>任务名称</th>'
                html2+=   '     <th>任务目标</th>'
                html2+=   '     <th>实际完成</th>'
                html2+=    '     </tr>'
                html2+=   '     </thead>'
                html2+=   '  <tbody>'
                html2+=    '<tr>'
                html2+=    '  <td>时长</td>'
                html2+=   '  <td>'+taskIng.taskTime+'天</td>'
                html2+=   '  <td>3天</td>'
                html2+=   '</tr>'
                html2+=  '<tr>'
                html2+=   '  <td>平均单次阅读时长</td>'
                if(taskIng.avgRead == 1){
                   html2+=   '  <td>优秀</td>'
                }else if(taskIng.avgRead == 2){
                   html2+=   '  <td>良好</td>'
                }else if(taskIng.avgRead == 3){
                   html2+=   '  <td>差</td>'
                }else if(taskIng.avgRead == 4){
                   html2+=   '  <td>极差</td>'
                }else{
                   html2+=   '  <td></td>'
                }
                html2+=   '  <td>良好</td>'
                html2+=   '</tr>'
                html2+=   '<tr>'
                html2+=    '  <td>平均阅读距离</td>'

                if(taskIng.avgReadDistance == 1){
                   html2+=   '  <td>优秀</td>'
                }else if(taskIng.avgReadDistance == 2){
                   html2+=   '  <td>良好</td>'
                }else if(taskIng.avgReadDistance == 3){
                   html2+=   '  <td>差</td>'
                }else if(taskIng.avgReadDistance == 4){
                   html2+=   '  <td>极差</td>'
                }else{
                   html2+=   '  <td></td>'
                }
                html2+=   '  <td>良好</td>'
                html2+= '</tr>'
                html2+=  '<tr>'
                html2+=    '  <td>平均单次看手机时长</td>'

                if(taskIng.avgLookPhone == 1){
                   html2+=   '  <td>优秀</td>'
                }else if(taskIng.avgLookPhone == 2){
                   html2+=   '  <td>良好</td>'
                }else if(taskIng.avgLookPhone == 3){
                   html2+=   '  <td>差</td>'
                }else if(taskIng.avgLookPhone == 4){
                   html2+=   '  <td>极差</td>'
                }else{
                   html2+=   '  <td></td>'
                }
                html2+=  '  <td>4h</td>'
                html2+=   '</tr>'
                html2+=   '<tr>'
                html2+=    '  <td>平均坐姿倾斜度</td>'

                if(taskIng.avgSitTilt == 1){
                   html2+=   '  <td>优秀</td>'
                }else if(taskIng.avgSitTilt == 2){
                   html2+=   '  <td>良好</td>'
                }else if(taskIng.avgSitTilt == 3){
                   html2+=   '  <td>差</td>'
                }else if(taskIng.avgSitTilt == 4){
                   html2+=   '  <td>极差</td>'
                }else{
                   html2+=   '  <td></td>'
                }

                html2+=   '  <td>良好</td>'
                html2+=   '</tr>'
                html2+=    '<tr>'
                html2+=   '  <td>健康用眼评级</td>'
                if(taskIng.eyeRate == 1){
                   html2+=   '  <td>优秀</td>'
                }else if(taskIng.eyeRate == 2){
                   html2+=   '  <td>良好</td>'
                }else if(taskIng.eyeRate == 3){
                   html2+=   '  <td>差</td>'
                }else if(taskIng.eyeRate == 4){
                   html2+=   '  <td>极差</td>'
                }else{
                   html2+=   '  <td></td>'
                }
                html2+=   '  <td>良好</td>'
                html2+=   '</tr>'
                html2+=   '<tr>'
                html2+=   '  <td>平均户外时长</td>'
                if(taskIng.avgOut == 1){
                   html2+=   '  <td>优秀</td>'
                }else if(taskIng.avgOut == 2){
                   html2+=   '  <td>良好</td>'
                }else if(taskIng.avgOut == 3){
                   html2+=   '  <td>差</td>'
                }else if(taskIng.avgOut == 4){
                   html2+=   '  <td>极差</td>'
                }else{
                   html2+=   '  <td></td>'
                }

                html2+=    '  <td>良好</td>'
                html2+=   '</tr>'
                html2+=    '<tr>'
                html2+=   '  <td>平均阅读光照</td>'

                if(taskIng.avgLight == 1){
                   html2+=   '  <td>优秀</td>'
                }else if(taskIng.avgLight == 2){
                   html2+=   '  <td>良好</td>'
                }else if(taskIng.avgLight == 3){
                   html2+=   '  <td>差</td>'
                }else if(taskIng.avgLight == 4){
                   html2+=   '  <td>极差</td>'
                }else{
                   html2+=   '  <td></td>'
                }

                html2+=   '  <td class="excellent">优秀</td>'
                html2+=    '</tr>'
                html2+=   '<tr>'
                html2+=   '  <td>平均单次看电脑电视时长</td>'
                if(taskIng.avgLookTv == 1){
                   html2+=   '  <td>优秀</td>'
                }else if(taskIng.avgLookTv == 2){
                   html2+=   '  <td>良好</td>'
                }else if(taskIng.avgLookTv == 3){
                   html2+=   '  <td>差</td>'
                }else if(taskIng.avgLookTv == 4){
                   html2+=   '  <td>极差</td>'
                }else{
                   html2+=   '  <td></td>'
                }

                html2+=   '  <td class="excellent">优秀</td>'
                html2+=   '</tr>'
                html2+=    '<tr>'
                html2+=    '  <td>有效使用监护仪总时长</td>'
                if(taskIng.effectiveUseTime == 1){
                   html2+=   '  <td>优秀</td>'
                }else if(taskIng.effectiveUseTime == 2){
                   html2+=   '  <td>良好</td>'
                }else if(taskIng.effectiveUseTime == 3){
                   html2+=   '  <td>差</td>'
                }else if(taskIng.effectiveUseTime == 4){
                   html2+=   '  <td>极差</td>'
                }else{
                   html2+=   '  <td></td>'
                }
                html2+=   '  <td>良好</td>'
                html2+=   '</tr>'
                html2+=   '  </tbody>'
                html2+=   '</table>'

                $('.HHxiangqing').html(html2)
			 }else{
                $('.nobody').html('<h1 style="text-align: center">暂无任务</h1>');
                $('.boyBotton').hide()
			 }

          },
          error: function (request) {
             alert("Connection error");
          },
       });



    })
</script>
</html>


